<template>
  <view class="mine-container">
<view id="main" style="width: 100%;height: 400px;"></view>
<view>
		<el-table
		    :data="tableData"
		    stripe
		    style="width: 100%"
			:row-class-name="tableRowClassName">
		    <el-table-column
		      prop="custSource"
		      label="客户来源"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="number"
		      label="数量"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="ritio"
		      label="转化率"
			  >
		    </el-table-column>

		  </el-table>
	</view>
  </view>
</template>

<script>
  import storage from '@/utils/storage'
  import * as echarts from 'echarts';
  

  
  export default {
    data() {
      return {
		  tableData:[]
		  
        }
    },
onLoad() {
	
	uni.request({
		url:'http://localhost:8089/crmdemo/contract/queryCustSorce',
		success: (res) => {
			
			this.tableData = res.data.result;

		}
	});
	
},
mounted() {
	var chartDom = document.getElementById('main');
	var myChart = echarts.init(chartDom);
	var option;
	setTimeout(function () {
	  option = {
	    legend: {},
	    tooltip: {
	      trigger: 'axis',
	      showContent: false
	    },
	    dataset: {
	      source: [
	        ['年份', '2018', '2019', '2020', '2021', '2022', '2023'],
	        ['电话介绍', 15, 18, 7, 11, 15, 32],
	        ['线下宣传', 11, 4, 5, 13, 17, 35],
	        ['转介绍', 14, 6, 16, 14, 14, 36],
	
			['网络宣传', 2, 12, 1, 16, 9, 29]
	      ]
	    },
	    xAxis: { type: 'category' },
	    yAxis: { gridIndex: 0 },
	    grid: { top: '55%' },
	    series: [
	      {
	        type: 'line',
	        smooth: true,
	        seriesLayoutBy: 'row',
	        emphasis: { focus: 'series' }
	      },
	      {
	        type: 'line',
	        smooth: true,
	        seriesLayoutBy: 'row',
	        emphasis: { focus: 'series' }
	      },
	      {
	        type: 'line',
	        smooth: true,
	        seriesLayoutBy: 'row',
	        emphasis: { focus: 'series' }
	      },
	      {
	        type: 'line',
	        smooth: true,
	        seriesLayoutBy: 'row',
	        emphasis: { focus: 'series' }
	      },
	      {
	        type: 'pie',
	        id: 'pie',
	        radius: '30%',
	        center: ['50%', '25%'],
	        emphasis: {
	          focus: 'self'
	        },
	        label: {
	          formatter: '{b}: {@2023} ({d}%)'
	        },
	        encode: {
	          itemName: 'product',
	          value: '2023',
	          tooltip: '2023'
	        }
	      }
	    ]
	  };
	  myChart.on('updateAxisPointer', function (event) {
	    const xAxisInfo = event.axesInfo[0];
	    if (xAxisInfo) {
	      const dimension = xAxisInfo.value + 1;
	      myChart.setOption({
	        series: {
	          id: 'pie',
	          label: {
	            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
	          },
	          encode: {
	            value: dimension,
	            tooltip: dimension
	          }
	        }
	      });
	    }
	  });
	  myChart.setOption(option);
	})
	option && myChart.setOption(option)
},
    methods: {
		tableRowClassName({row, rowIndex}) {
		   if (rowIndex === 1) {
		     return 'warning-row';
		   } else if (rowIndex === 3) {
		     return 'success-row';
		   }
		   return '';
		 }  
	}
   
  }
</script>






<style lang="scss">
  page {
    background-color: #f5f6f7;
  }

  .mine-container {
    width: 100%;
    height: 100%;


    .header-section {
      padding: 15px 15px 45px 15px;
      background-color: #3c96f3;
      color: white;

      .login-tip {
        font-size: 18px;
        margin-left: 10px;
      }

      .cu-avatar {
        border: 2px solid #eaeaea;

        .icon {
          font-size: 40px;
        }
      }

      .user-info {
        margin-left: 15px;

        .u_title {
          font-size: 18px;
          line-height: 30px;
        }
      }
    }

    .content-section {
      position: relative;
      top: -50px;

      .mine-actions {
        margin: 15px 15px;
        padding: 20px 0px;
        border-radius: 8px;
        background-color: white;

        .action-item {
          .icon {
            font-size: 28px;
          }

          .text {
            display: block;
            font-size: 13px;
            margin: 8px 0px;
          }
        }
      }
    }
  }
</style>
